<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
    <title>Jcrop &raquo; Tutorials &raquo; Non-Image</title>
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
    <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
    <link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
    <script type="text/javascript">

    jQuery(function($){

      // I did JSON.stringify(jcrop_api.tellSelect()) on a crop I liked:
      var c = {"x":13,"y":7,"x2":487,"y2":107,"w":474,"h":100};

      $('#target').Jcrop({
        bgFade: true,
        setSelect: [c.x,c.y,c.x2,c.y2]
      });

    });

    </script>
    <style type="text/css">
      #target {
        background-color: #ccc;
        width: 500px;
        height: 330px;
        font-size: 24px;
        display: block;
      }
    </style>
  </head>

  <body>
    <div id="outer">
    <div class="jcExample">
    <div class="article">

      <h1>Jcrop - Non-Image</h1>
      <p id="target">
        <b style="display:block; padding: .5em 1em;">
          This is an example of attaching Jcrop to a target that is not an image. You are now cropping a paragraph tag.
        </b>
      </p>

      <p>
        <b>Attaching Jcrop to a non-image element.</b>
        This is mostly useful to implement other interfaces, such as <tt>canvas</tt> or over an arbitrary <tt>div</tt>.
      </p>

      <div id="dl_links">
        <a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
        <a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
      </div>

    </div>
    </div>
    </div>
  </body>
</html>

